<template>
	<view class="content">
		<!-- header -->
		<view class="header">
			<!-- circular -->
			<view class="circular">
				<li>
					<image src="../../static/images/medicenTest.png" mode=""></image>
					<text>处方缴费</text>
				</li>
				<li>
					<image src="../../static/logo/feiy.png" mode=""></image>
					<text>取药收药</text>
				</li>
				<li>
					<image src="../../static/logo/kuf.png" mode=""></image>
					<text>操作指南</text>
				</li>
			</view>
			<!-- card -->
			<view class="card">
				<li>
					<image src="../../static/logo/jiany.png" mode=""></image>
					<view class="cardLiBox">
						<text>科室介绍</text>
						<text style="font-size: 8px;">了解医院科室</text>
					</view>
				</li>
				<li>
					<image src="../../static/images/Yuanz.png" mode=""></image>
					<view class="cardLiBox">
						<text>专家介绍</text>
						<text style="font-size: 8px;">了解专家信息</text>
					</view>
				</li>
			</view>
			<!-- 二级导航标题 -->
			<view class="SeconedNavacation">
				<!-- title -->
				<view class="SeconedNavacation-title">
					<text>特色科室</text>
					<text style="font-size: 10px;">更多</text>
				</view>
				<!-- list -->
				<view class="SeconedNavacation-List">
					<view class="litbox" v-for="(v,i) in List" :index='i' :key="i">
						<uni-tag style="font-size: 8px;" :circle="true" :text="v.text" type="primary" />
					</view>
				</view>
			</view>

		</view>
		<!-- main -->
		<!-- title -two -h2 -->
		<view class="Main">
			<text>推荐医生</text>
			<text style="font-size: 10px;">更多</text>
		</view>
		<!-- DoctorsList -->
		<view class="doctorList">
			<scroll-view class="scroll-box" scroll-x="true" @scroll="scroll">
				<li>
					<view class="doctorListbox" v-for="(item,index) in docList" :index='index' :key="index">
						<image :src="item.imgUrl" mode=""></image>
						<text style="font-weight: 600;">{{item.username}}</text>
						<text style="font-size: 8px;color: #b8b8b8;">{{item.information}}</text>
					</view>
				</li>
			</scroll-view>
		</view>
		<!-- title -two -h3 -->
		<view class="Main-More">
			<text>更多服务</text>
			<text style="font-size: 10px;">更多</text>
		</view>
	</view>
</template>

<script>
	import TargetList from '@/external/TargetList'
	import ModelDoctors from '@/external/ModelDoctors'
	export default {
		data() {
			return {
				List: [],
				scrollTop: 0,
				old: {
				scrollTop: 0
				},
				docList: [],
				cover: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg',
				avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
				extraIcon: {
					color: '#4cd964',
					size: '22',
					type: 'gear-filled'
				},

			};
		},
		mounted() {
			// 调用存放在外部的数据
			this.List = TargetList.map(function(v) {
				return v
			})
			// 模拟推荐医生信息
			// 调用存放在外部的数据
			this.docList = ModelDoctors.map(function(item) {
				return item
			})

		},

		methods: {
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			onClick(e) {
				console.log(e)
			},
			actionsClick(text) {
				uni.showToast({
					title: text,
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #eee;

		.header {
			.circular {
				display: flex;
				justify-content: space-around;
				align-items: center;
				flex: 1;
				height: 140rpx;
				padding: 12px;
				border-radius: 10px;
				background-color: #fff;

				li {
					display: flex;
					flex-direction: column;
					align-items: center;

					image {
						width: 40px;
						height: 40px;
						border-radius: 50%;
					}

					text {
						margin-top: 4px;
						font-size: 10px;
					}
				}
			}

			.card {
				border-radius: 10px;
				margin: 10px 6px;
				height: 140rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background-color: #fff;

				li {
					display: flex;

					image {
						width: 40px;
						height: 40px;
						border-radius: 50%;
					}

					.cardLiBox {
						display: flex;
						flex-direction: column;
						justify-content: center;
						margin: 6px;

						text {
							font-size: 12px;
						}
					}
				}
			}

			// 二级导航标题
			.SeconedNavacation {

				.SeconedNavacation-title {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 8px;
					height: 20px;

					text {
						font-size: 14px;
						font-weight: 600;
					}

				}

				.SeconedNavacation-List {
					padding: 12px;
					margin: 0 6px;
					border-radius: 6px;
					height: 120rpx;
					display: flex;
					flex-wrap: wrap;
					text-overflow: ellipsis;
					background-color: #fff;

					.litbox {
						display: flex;
						align-items: center;
						text-align: center;
						margin: 0 4px 4px 4px;
					}
				}

			}
		}

		// Main-SeconedNavacation-title-two-h2
		.Main {
			display: flex;
			padding: 8px;
			justify-content: space-between;
			align-items: center;
			height: 20px;

			text {
				font-size: 14px;
				font-weight: 600;
			}
		}

		.doctorList {
			background-color: #fff;
			padding: 12px;
			margin: 0 6px;
			border-radius: 6px;
			height: 120rpx;
			display: flex;
			flex-wrap: wrap;
			text-overflow: ellipsis;

			.scroll-box {
				white-space: nowrap;
				overflow: hidden;

				/* 确保溢出的部分不显示 */
				li {
					display: flex;

					image {
						width: 30px;
						height: 30px;
						border-radius: 50%;
						margin-left: 8px;
					}

					.doctorListbox {
						transition: transform 0.3s ease;
						/* 右滑动画 */
						transform: translateX(10%);
						/* 初始隐藏在容器外 */
						display: flex;
						align-items: center;
						flex-direction: column;
						margin: 4px;
						font-size: 10px;

						text {
							margin-left: 8px;
							margin-top: 2px;
							font-size: 10px;
						}
					}
				}
			}

		}

		.Main-More {
			display: flex;
			padding: 8px;
			justify-content: space-between;
			height: 20px;
			align-items: center;

			text {
				font-size: 14px;
				font-weight: 600;
			}
		}

	}
</style>